'use strict';

const glob = require("glob");
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FriendlyErrorsWebpckPlugin = require("friendly-errors-webpack-plugin");

const htmlWebExternalPlugin = require("html-webpack-externals-plugin");

const setMPA = ()=> {
    const entry = {};
    const htmlWebpackPlugins = [];

    const entryFiles = glob.sync(path.join(__dirname,'./src/*/index.js'));
    // console.log('entryFiles',entryFiles);

    Object.keys(entryFiles)
        .map((index) => {
            const entryFile = entryFiles[index];
            
            const match = entryFile.match(/src\/(.*)\/index\.js/);
            const pageName = match && match[1];
            
            entry[pageName] = entryFile;

            htmlWebpackPlugins.push(
                new HtmlWebpackPlugin({
                    template:path.join(__dirname,`./src/${pageName}/index.html`),
                    filename:`${pageName}.html`,
                    chunks:[pageName],
                    inject:true,
                    minify:{
                        html5:true,
                        collapseWhitespace:true,
                        preserveLineBreaks:false,
                        minifyCSS:true,
                        removeComments:false
                    } 
                })
            )
        })
    return {
        entry,
        htmlWebpackPlugins
    }
}

const { entry,htmlWebpackPlugins} =  setMPA();
    
module.exports = {
    //默认为false,不开启
    watch:true,
    //只有开启监听模式,watchOptions才有意义
    watchOptions:{
        //默认为空,不监听的文件或者文件夹,支持正则匹配,忽略node_modules可以极大的提高性能
        ignored:/node_modules/,
        //监听到变化发生后等待300ms再去执行,默认300ms
        aggregateTimeout:300,
        //判断文件是否发生变化是通过不停询问系统指定文件有没有发生变化实现,默认每秒问1000次
        poll:1000
    },
    entry:entry,
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules :[
            {test:/\.js$/,use:'babel-loader'},
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.(svg|jpg|gif)$/,use:['file-loader']},
            {test:/\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader']},
            {test:/\.(png|svg|jpg|gif)$/,use:[{
                loader:'url-loader',
                options:{
                    limit:102400 //字节数
                }
            }
            ]}
        ]
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new htmlWebExternalPlugin({
            externals:[
                {
                    module:'react',
                    entry:'https://unpkg.com/react@16/umd/react.production.min.js',
                    global:'React'
                },
                {
                    module:'react-dom',
                    entry:'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
                    global:'ReactDOM'
                }
            ]
        })
    ].concat(htmlWebpackPlugins),
    mode:"development",
    devServer:{
        contentBase:"./dist",
        hot:true,
        stats:'normal'
    }
    // externals: [{
    //     xmlhttprequest:'{XMLHttpRequest:XMLHttpRequest}'
    //  }]
}